<template>
<div class="about">
  <h1>最喜欢的音乐</h1>
  <input type="text" v-model="searchname">
  <input type="button" value="请搜索歌手" @click="doSearch">
<br>
     <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="歌手"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="类型"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="歌名">
      </el-table-column>
    </el-table>
   </div>
  </template>

<script>
    export default{
        data(){
            return{
              add:{
                    date:undefined,
                    name:undefined,
                    address:undefined,
              },searchname:undefined,
        tableData: [{
            date: '周杰伦',
            name: '华语',
            address: '《七里香》《晴天》《夜曲》《青花瓷》《稻香》《简单爱》《双截棍》《东风破》《以父之名》《发如雪》《听妈妈的话》《珊瑚海》《菊花台》《龙卷风》《告白气球》《轨迹》《黑色幽默》《半岛铁盒》《安静》《爱在西元前》'
          }, {
            date: '邓紫棋',
            name: '华语',
            address: '《泡沫》《光年之外》《来自天堂的魔鬼》《倒数》《句号》《我的秘密》《再见》《喜欢你》《岩石里的花》《多远都要在一起》《桃花诺》《摩天动物园》《透明》《画》《别勉强》《孤独》《Fly Away》《很久以后》'
          },{
            date: '泽野弘之',
            name: '英语，日语',
            address: '《Call of Silence》《aLIZe》《Avid》《gravityWall》《Bios》《X.U.》《ninelie》'
          }, 
          {
            date: 'MY FIRST STORY',
            name: '日语',
            address: '《ALONE》《With You》《不可逆リプレイス》《流星》《REVIVER》《モノクローム》《花鳥風月》《アンダーワールド》《サムライハート》《The Light》'
          }, 
          {
            date: '五月天',
            name: '华语',
            address: '《倔强》《温柔》《突然好想你》《知足》《恋爱ing》《你不是真正的快乐》《我不愿让你一个人》《步步》《干杯》《后来的我们》'
          },  {
            date: '蓝心羽',
            name: '华语',
            address: '《阿拉斯加海湾》《星辰不坠落》《小宇》《孤单边缘》《别怕我伤心》《你的轮廓》《成全》《虚拟》《解药》《世界那么大还是遇见你》'
          } ,{
            date: '薛之谦',
            name: '华语',
            address: '《天外来物》《变废为宝》《男二号》《像风一样》《被人》《配合》《凤毛麟角》《无数》《可》《骆驼》'
          },{
            date: '杨宗纬',
            name: '华语',
            address: '《洋葱》《凉凉》《一次就好》《其实都没有》《空白格》《我变了 我没变》《那个男人》《红尘来去一场梦》《这一路走来》《底细》'
          },{
            date: '米津玄师',
            name: '日语',
            address: '《Lemon》《LOSER》《打上花火》《春雷》《灰色と青》《orion》《パプリカ》《Flamingo》《感電》《馬と鹿》'
          },{
            date: '草东没有派对',
            name: '华语',
            address: '《山海》《烂泥》《大风吹》《勇敢的人》《在》《等》《鬼》《丑》《我们》《床》《但》《情歌》《顶楼》《漩涡》《还愿》《埃玛》《张天志》《梦》《红》《看不见的城市》'
          },{
            date: '杨宗纬',
            name: '华语',
            address: '《洋葱》《凉凉》《一次就好》《其实都没有》《空白格》《我变了 我没变》《那个男人》《红尘来去一场梦》《这一路走来》《底细》'
          },{
            date: '周深',
            name: '华语',
            address: '《大鱼》《光亮》《和光同尘》《Rubia》《望》《缘起》《悬崖之上》《触不可及》《灯火里的中国》《若梦》《梅香如故》《归处》《情是何物》《愿得一心人》《明月传说》《影》《昙花一现雨及时》《无关》《东游》《直破穹苍》'
          },{
            date: '陈粒',
            name: '华语',
            address: '《小半》《易燃易爆炸》《奇妙能力歌》《走马》《历历万乡》《光》《性空山》《虚拟》《不灭》《绝对占有相对自由》《桥豆麻袋》《幻期颐》《芳草地》《七楼》《怪不得》《五言》《正趣果上果》《爱若》《短歌》《空空》'
          }
          ]
        }
    },
    methods:{
      doSearch(){
                    let arr=this.tableData.filter(item=>{
                        return item.date.indexOf(this.searchname)>=0;
                    });
                    this.tableData = arr;
                },
    },

    }
</script>
